<template>
  <el-select
    v-model="svalue"
    filterable
    remote
    clearable
    :disabled="disabled"
    placeholder="请输入关键词"
    :remote-method="remoteMethod"
  >
    <el-option
      v-for="item in emps"
      :key="item.empCode"
      :label="item.empName"
      :value="item.empCode"
    >
      <span style="float: left">{{ item.empName }}</span>
    </el-option>
  </el-select>
</template>
<script>
import { getEmpListFuzzy } from '@/api/organization/emp-service'

export default {
  props: {
    orgcode: {
      type: String,
      default: ''
    },
    value: {
      type: String,
      default: ''
    },
    disabled: {
      type: Boolean,
      default: () => { return false }
    }
  },
  data() {
    return {
      datas: [],
      emps: [],
      svalue: ''
    }
  },
  watch: {
    // 判断下拉框的值是否有改变
    svalue(val, oldVal) {
      console.log('new: %s, old: %s', val, oldVal)
      if (val !== oldVal) {
        this.$emit('input', val)
      }
    },
    value(val, oldVal) {
      if (val !== oldVal) {
        this.svalue = this.value.toString()
      }
    }
  },
  mounted() {
    this.svalue = this.value.toString()
    const dictArray = this.getDictArray(this.dicttypeid)
    this.datas = dictArray
  },
  methods: {
    remoteMethod(val) {
      const queryData = {}
      queryData.empName = val
      getEmpListFuzzy(queryData).then(res => {
        this.emps = res.data
      })
    }
  }
}
</script>

<style scoped>
  .el-select{
    width: 100%
  }
  .el-select-dropdown__item.selected{
    font-weight: normal;
  }
</style>
